<!DOCTYPE html>
<html>
<!-- 为用户关联角色的方法 -->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入Element必要的依赖文件 -->
    <link rel="stylesheet" href="../../../plugins/element-ui/lib/theme-chalk/index.css">
    <script src="../../../plugins/vue/vue.js"></script>
    <script src="../../../plugins/element-ui/lib/index.js"></script>
    <script src="../../../plugins/axios/axios.min.js" type="text/javascript"></script>
    <script src="../../../js/request.js"></script>
    <script src="../../../api/admin.js"></script>
    <script src="../../../js/validate.js"></script>
    <script src="../../../js/index.js"></script>

<body>
    <!-- div关联Vue依赖 -->
    <div id="div">
        <!-- 当前选中用户提示 -->
        <el-tag type="success" style="margin-top: 0px;margin-bottom: 15px;margin-left:32px;">当前选中用户：{{admin.name}}
        </el-tag>
        <!-- 新增数据表单start -->
        <el-form :model="ruleForm" label-width="100px" class="demo-ruleForm">
            <!-- 用户角色 -->
            <el-form-item label="用户角色" prop="checkList" width="500px">
                <div>
                    <!-- 多选框，数据从后台加载 -->
                    <el-checkbox-group v-model="ruleForm.checkList">
                        <el-checkbox v-for="(val,index) in roleList" :label="val.roleId" :key="val.roleId"
                            :name="val.roleId">{{val.name}}
                        </el-checkbox>
                    </el-checkbox-group>
                </div>
            </el-form-item>

            <!-- 操作按钮 -->
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 新增数据表单end -->
    </div>
</body>
<!-- js代码部分 -->
<script>
    // Vue核心对象
    new Vue({
        el: "#div",
        data() {
            return {
                //如果是修改，责标记当前id
                id: '',
                //加载的角色集合
                roleList: [{
                    roleId: '1',
                    name: '测试1',
                    checked: ''
                }, {
                    roleId: '2',
                    name: '测试2',
                    checked: 'checked'
                }, {
                    roleId: '3',
                    name: '测试3',
                    checked: 'checked'
                }],
                //表单提交的数据
                ruleForm: {
                    checkList: [],
                },
                // 数据验证
                rules: {
                },
                //加载的当前用户数据
                admin: ''
            };
        },
        //钩子函数，创建页面时被初始化
        created() {
            //从请求路径中获取id数据
            this.id = requestUrlParam('id')
            //如果id存在，则执行初始化方法， 根据id查询数据
            if (this.id) {
                this.init()
            }

        },
        mounted() {

        },
        methods: {
            //初始化方法：根据id查询单条数据，进行修改时的数据回显
            async init() {
                //加载当前用户数据
                queryAdminById(this.id).then(res => {
                    console.log(res)
                    if (String(res.code) === '1') {
                        this.admin = res.data
                    } else {
                        this.$message.error(res.msg || '操作失败')
                    }
                }),
                    queryRoleById(this.id).then(res => {
                        console.log(res)
                        if (String(res.code) === '1') {
                            this.roleList = res.data
                            //查询集合中的数据，对选中状态数据抽取成id集合赋值
                            let checkedList = this.roleList.filter((role) => {
                                return role.checked === 'checked'
                            })
                            console.log(checkedList);
                            for (let i in checkedList) {
                                this.ruleForm.checkList.push(checkedList[i].roleId)
                            }
                        } else {
                            this.$message.error(res.msg || '操作失败')
                        }
                    })
            },
            //重置数据的方法
            resetForm(ruleForm) {
                this.ruleForm = {
                    name: '',
                    checkList: ''
                }
            },
            // 提交数据的方法
            submitForm(formName) {
                //01.判断当前用户的Id是否为空
                if (this.admin.adminId === '') {
                    parent.index.$message.error('找不到当前用户数据')
                } else {
                    //获取要提交的角色数据
                    let roles = {
                        ...this.ruleForm,
                    }
                    let adminId = this.admin.adminId
                    //如果是修改的方法，责需要携带id
                    updateRole(roles, adminId).then(res => {
                        if (res.code === 1) {
                            parent.index.$message.success('用户授权成功！')
                            //关闭窗口
                            parent.index.dialogVisible = false
                            //刷新数据
                            parent.index.handleQuery()
                        } else {
                            parent.index.$message.error(res.msg || '操作失败')
                        }
                    }).catch(err => {
                        parent.index.$message.error('请求出错了：' + err)
                    })
                }
            },
        }
    });
</script>

</html>